<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Modal v-model='modal' title="添加项目" :mask-closable='false' @on-cancel='canceledit(modalparams)' width="800">
        <Form :label-width='120' ref='modalparams' :model='modalparams' :rules='createRules'>
            <FormItem label='项目名称：' prop='project_id'>
                <Select v-model="modalparams.project_id" style="width:300px" placeholder='请先选择项目' @on-change="changeproject">
                    <Option v-for="item in projectlist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label='项目域名：' prop='project_domain'>
                <Input v-model="modalparams.project_domain" placeholder="请输入项目域名"  style="width:300px" clearable />
            </FormItem>
            <div  v-for="(vps,index) in modalparams.sooList" :key="index">
                <FormItem :label="'站点服务器 ' + (index+1)+': '" :prop='`sooList.${index}.vps_id`' :rules="createRules.vps_id">
                    <Row>
                        <Col :span="8">
                            <Select v-model="vps.vps_id"  style="width:200px" placeholder='请先选择站点服务器' @on-change="changelist(vps,index)">
                                <Option v-for="item in Vpslist" :value="item.id" :key="item.id" :disabled="item.disabled">{{item.public_ip}} - {{ item.alias_name }}</Option>
                            </Select>
                        </Col>
                        <Col :span="8">
                        <Select v-model="vps.db_id"  style="width:200px" placeholder='请先选择数据库服务器'>
                                <Option v-for="item in vpdataList" :value="item.id" :key="item.id">{{item.public_ip}} - {{ item.alias_name }}</Option>
                            </Select>
                        </Col>
                        <Col :span="6">
                            <Button @click="changevps" style="margin-right: 10px;"><Icon type="ios-add"  /></Button>
                            <Button @click="handleRemove(index)" ><Icon type="ios-remove" /></Button>
                        </Col>
                    </Row>
                </FormItem>
            </div>
            <FormItem label='项目状态：'>
                <RadioGroup v-model="modalparams.status">
                    <Radio v-for="item of raidolist" :key="item.value" :label="item.value">{{item.label}}</Radio>
                </RadioGroup>
            </FormItem>
        </Form>
        <div slot='footer'>
            <Button @click='canceledit("modalparams")'>取消</Button>
            <Button type='primary' @click='submitedit("modalparams")'>保存</Button>
        </div>
    </Modal>
</template>

<script>
    import axiosApi from 'axios'
    import { vpsvpsvpsprojectadd } from '@api/projectsetting';
    import template from '../../../components/search/template.vue';
    import { vpsvpsvpslist, projectIndex } from '@api/VPSsetting';
    export default {
        components: { template },
        data () {
            return {
                // modalparams: 'modalparams',
                modal: false,
                edit: false,
                projectlist: [],
                Vpslist: [],
                vpdataList: [],
                raidolist: [{ value: 1, label: '启用' }, { value: 0, label: '禁用' }],
                index: 1,
                disabled: false,
                modalparams: { id: 0,
                               project_id: '',
                               vps_ids: [],
                               status: 1,
                               project_domain: '',
                               sooList: [{
                                   vps_arr: [],
                                   index: 1,
                                   status: 1
                }] },
                createRules: {
                    project_id: [{
                        required: true,
                        message: '请先选择项目',
                        trigger: 'change'
                    }],
                    vps_id: [{ validator: this.validateeType, trigger: 'change', required: true }],
                    // vps_id: [{
                    //     required: true,
                    //     message: '请先选择服务器',
                    //     trigger: 'change,blur'
                    // }],
                    project_domain: [{
                        required: true,
                        message: '请先输入项目域名',
                        trigger: 'blur'
                    }]
                }
            }
        },

        props: ['Vpslists'],
        mounted () {
            // console.log(process.env.VUE_APP_project, 'projects')

            // axiosApi.get(`${process.env.VUE_APP_project}/v1/base/project/index`).then(res => {
            //     this.projectlist = res.data.data
            // }).catch(error => {});
        },
        /* 函数方法集合 */
        methods: {

            validateeType (rule, value, callback) {
                if (value === '' || value === undefined) {
                    callback(new Error('请先选择服务器'));
                } else {
                    callback();
                }
            },
            /* @函数功能: 初始化 */
            initial () {
                this.getprojectIndex()
                this.Vpslist = this.Vpslists.map(item => ({
                    ...item, disabled: false
                }))
                this.vpdataList = this.Vpslists
                this.modalparams = {
                    id: 0,
                    project_id: '',
                    vps_ids: [],
                    status: 1,
                    project_domain: '',
                    sooList: [
                        { vps_id: '',
                          db_id: '',
                          index: 1,
                          status: 1 }] }
                this.$refs['modalparams'].resetFields();
                this.modal = true
            },
            getprojectIndex () {
                projectIndex().then(res => {
                    this.projectlist = res
                })
            },
            getVps () {
                vpsvpsvpslist({ page: 0, pageSize: 0 }).then(res => {
                    this.Vpslist = res.list.map(item => ({
                        ...item, disabled: false
                    }))
                    this.vpdataList = res.list
                })
            },
            canceledit (name) {
                this.$refs[name].resetFields();
                this.modal = false;
                this.$emit('askData')
            },
            submitedit (name) {
                let data = this.modalparams.sooList.map(item => ({
                    vps_id: item.vps_id,
                    db_id: item.db_id
                }))
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = {
                            id: 0,
                            project_id: this.modalparams.project_id,
                            vps_arr: JSON.stringify(data),
                            status: this.modalparams.status,
                            project_domain: this.modalparams.project_domain
                        }
                        if (data.length > 0) {
                            vpsvpsvpsprojectadd(params).then(() => {
                                this.$Message.success('新增成功')
                                this.$refs[name].resetFields();
                                this.modal = false
                                this.$emit('askData')
                            })
                        } else {
                            this.$Message.error('请至少新增一条站点服务器')
                        }
                    }
                })
            },
            changevps () {
                this.index++;

                this.modalparams.sooList.push(
                    {
                        vps_id: '',
                        db_id: '',
                        index: this.index,
                        status: 1
                    }
                )
            },
            handleRemove (index) {
                if (index == 0) {
                    this.$Message.success('至少有一条站点服务')
                } else {
                    this.modalparams.sooList.splice(index, 1)
                }

                // this.modalparams.sooList[index].status = 0;
            },
            changeproject () {
                this.getway()
            },
            getway () {
                // 数组比对方法i
                this.Vpslist.forEach(item => {
                    let arr = item.project_ids.split(',')
                    let index = arr.includes(this.modalparams.project_id)
                    if (index == false) {
                        item.disabled = false
                    } else {
                        item.disabled = true
                    }
                })
            },
            // 下拉changelist站点服务器
            changelist (val, index) {
                this.modalparams.sooList[index].db_id = val.vps_id
            }
        }
    }
</script>
